import React, { useEffect, useState } from "react";
import style from "./style.module.scss";
import backIcon from "../../../assets/images/icon/common resource/hdpi/common_icon_back_white_n.png";
import messageIcon from "../../../assets/images/icon/common resource/hdpi/common_nav_message_white_n.png";
import currentIcon from "../../../assets/images/image/hdpi/the_current_inquiry.png";
import historyIcon from "../../../assets/images/image/hdpi/historical_inquiry.png";
import fileIcon from "../../../assets/images/icon/common resource/hdpi/my_icon_file_n.png";
import walletIcon from "../../../assets/images/icon/common resource/hdpi/my_icon_wallet_n.png";
import collectionIcon from "../../../assets/images/icon/common resource/hdpi/common_button_collection_small_n.png";
import adviceIcon from "../../../assets/images/icon/common resource/hdpi/my_icon_advice_n.png";
import videoIcon from "../../../assets/images/icon/common resource/hdpi/my_icon_video_n.png";
import circleIcon from "../../../assets/images/icon/common resource/hdpi/my_icon_circle_n.png";
import attentionIcon from "../../../assets/images/icon/common resource/hdpi/common_icon_attention_small_n.png";
import taskIcon from "../../../assets/images/icon/common resource/hdpi/my_icon_task_n.png";
import setIcon from "../../../assets/images/icon/common resource/hdpi/my_icon_set_n.png";
import { useNavigate } from "react-router-dom";
import { ConsultationCell, MenuItem } from "../../../components";
import { getMyAssignmentaddSign, getWhetherSign } from "../../../api/my";
import { useAppSelector } from "../../../store/hooks";
import { useRequest } from "ahooks";
import { RootState } from "../../../store";
import { createSelector } from "@reduxjs/toolkit";

//  我的问诊单元格类型
interface ConsultationItemRawState {
  consultationIcon: string;
  consultationText: string;
}

//  我的菜单类型
interface MenuItemRawState {
  menuUrl: string;
  menuText: string;
}

const Index: React.FC = () => {
  const navigate = useNavigate();
  const [isAccomplish, setIsAccomplish] = useState<boolean>(false);
  const selectUserInfo = (state: RootState) => state.user.userInfo;
  const createUserInfo = createSelector(selectUserInfo, (userInfo) => {
    return userInfo
  })
  const userInfo = useAppSelector((state) => createUserInfo(state));
  //用户签到
  const userId = useAppSelector((state) => state.user.userInfo.userId);
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId);

  const handleSign = async () => {
    const { message } = await getMyAssignmentaddSign(userId, sessionId);
    if (message === "签到成功") setIsAccomplish(true);
  };
  //查询用户当天是否签到
  const { run } = useRequest(async () => {
    const resp = await getWhetherSign(userId, sessionId);
    if (resp.result == 1) setIsAccomplish(true);
    return resp.result;
  });


  useEffect(() => {
    run();
  }, []);

  const { headPic, userName, nickName } = userInfo;
  const [consultationList] = useState<ConsultationItemRawState[]>([
    {
      consultationIcon: currentIcon,
      consultationText: "当前问诊",
    },
    {
      consultationIcon: historyIcon,
      consultationText: "历史问诊",
    },
  ]);
  const [menuList] = useState<MenuItemRawState[]>([
    {
      menuUrl: fileIcon,
      menuText: "我的档案",
    },
    {
      menuUrl: walletIcon,
      menuText: "我的钱包",
    },
    {
      menuUrl: collectionIcon,
      menuText: "我的收藏",
    },
    {
      menuUrl: adviceIcon,
      menuText: "被采纳建议",
    },
    {
      menuUrl: videoIcon,
      menuText: "我的视频",
    },
    {
      menuUrl: circleIcon,
      menuText: "我的病友圈",
    },
    {
      menuUrl: attentionIcon,
      menuText: "我的关注",
    },
    {
      menuUrl: taskIcon,
      menuText: "我的任务",
    },
    {
      menuUrl: setIcon,
      menuText: "设置管理",
    },
  ]);

  const goConsultation = (index: number) => {
    if (index === 0) {
      navigate("/consultation/my/current");
    } else {
      navigate("/consultation/my/history");
    }
  };

  const menuNavigate = (index: number) => {
    switch (index) {
      case 0:
        navigate("/my/profile?previousPath=/my");
        return;
      case 1:
        navigate("/wallet/my");
        return;
      case 2:
        navigate("/my/collection?type=collection");
        return;
      case 3:
        navigate("/my/adopt/idea");
        return;
      case 4:
        navigate("/my/pay/video?type=bought");
        return;
      case 5:
        navigate("/my/patient/circle");
        return;
      case 6:
        navigate("/my/attention");
        return;
      case 7:
        navigate("/my/sign");
        return;
      case 8:
        navigate("/set");
        return;
    }
  };

  return (
    <div className={style.my}>
      <div className={style.top}>
        <img
          src={backIcon}
          alt=""
          className={style.back}
          onClick={() => navigate(-1)}
        />
        <img
          src={messageIcon}
          alt=""
          className={style.message}
          onClick={() => navigate("/my/message")}
        />
      </div>
      <div className={style.user_wrapper}>
        <div className={style.userInfo}>
          <img src={headPic} alt="" className={style.avatar} />
          <span className={style.nickName}>{nickName}</span>
        </div>
        <div className={style.userSign} onClick={handleSign}>
          {isAccomplish ? "已签到" : "签到"}
        </div>
      </div>
      <div className={style.myConsultation}>
        <div className={style.title}>我的问诊</div>
        {consultationList.map((item, index) => {
          return (
            <ConsultationCell
              consultationIndex={index}
              consultationText={item.consultationText}
              consultationIcon={item.consultationIcon}
              key={index}
              onNavigate={goConsultation}
            ></ConsultationCell>
          );
        })}
      </div>
      <div className={style.menu}>
        {menuList.map((item, index) => {
          return (
            <MenuItem
              menuIndex={index}
              menuUrl={item.menuUrl}
              menuText={item.menuText}
              key={index}
              onNavigate={menuNavigate}
            ></MenuItem>
          );
        })}
      </div>
      {/* <div className={style.bottom}>&copy;八维移动通信学院毕业作品</div> */}
    </div>
  );
};

export default Index;
